<template>
  <el-dropdown trigger="click" @command="handleSetSize">
    <div>
      <svg-icon class-name="button" icon-class="swagger" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :command="item.value">
        {{ item.label }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import Cookies from 'js-cookie'

export default {
  data() {
    return {
      sizeOptions: [
        { label: '默认', value: '默认' },
        { label: '圆形', value: '圆形' },
        { label: '下底座', value: '下底座' },
        { label: '上底座', value: '上底座' },
        { label: '右底座', value: '右底座' },
        { label: '左底座', value: '左底座' },
        { label: '环绕矩形', value: '环绕矩形' }
      ]
    }
  },
  computed: {
  },
  methods: {
    handleSetSize(size) {
      console.log(size)
      if (size == '默认') {
        Cookies.set('buttonShape', JSON.stringify({
          borderRadius: '8px',
          borderColor: 'lightblue',
          paddingSpace: '1px 2px',
          width: '50px',
          height: '50px',
          margin: '1px 0',
          outline: 'none',
          textAlign: 'center',
        }))
      }


      if (size === '圆形') {
        Cookies.set('buttonShape', JSON.stringify({
          // 圆形按钮CSS样式
          backgroundColor: '#409eff',
          borderRadius: '50%',
          buttonColor: '#fff',
          borderColor: '#409eff',
          paddingSpace: '5px',
          borderLeft: 'auto',
          borderRight: 'auto',
          borderTop: 'auto',
          borderBottom: 'auto',
          width: '60px',
          height: '60px',
          margin: '0',
          outline: 'none',
          textAlign: 'center',
        }))
      }

      if (size == '下底座') {
        Cookies.set('buttonShape', JSON.stringify({
          // 下底座按钮CSS样式
          borderRadius: 'auto',
          borderColor: '#409eff',
          paddingSpace: '5px',
          borderLeft: '5px solid transparent',
          borderRight: '5px solid transparent',
          borderTop: '0',
          borderBottom: '15px solid',
          width: '60px',
          height: '60px',
          margin: '0',
          outline: 'none',
          textAlign: 'center',
        }))


      }

      if (size == '上底座') {
        Cookies.set('buttonShape', JSON.stringify({
          // 上底座按钮CSS样式
          borderRadius: 'auto',
          borderColor: '#409eff',
          paddingSpace: '5px',
          borderLeft: '5px solid transparent',
          borderRight: '5px solid transparent',
          borderTop: '15px solid',
          borderBottom: '0',
          width: '60px',
          height: '60px',
          margin: '0',
          outline: 'none',
          textAlign: 'center',
        }))
      }
      if (size == '右底座') {
        Cookies.set('buttonShape', JSON.stringify({
          // 右底座按钮CSS样式
          borderRadius: 'auto',
          borderColor: '#409eff',
          paddingSpace: '5px',
          borderLeft: '0',
          borderRight: '15px solid',
          borderTop: '5px solid transparent',
          borderBottom: '5px solid transparent',
          width: '60px',
          height: '60px',
          margin: '0',
          outline: 'none',
          textAlign: 'center',
        }))
      }

      if (size == '左底座') {
        Cookies.set('buttonShape', JSON.stringify({
          // 左底座按钮CSS样式
          borderRadius: 'auto',
          borderColor: '#409eff',
          paddingSpace: '5px',
          borderLeft: '15px solid',
          borderRight: '0',
          borderTop: '5px solid transparent',
          borderBottom: '5px solid transparent',
          width: '60px',
          height: '60px',
          margin: '0',
          outline: 'none',
          textAlign: 'center',
        }))
      }

      if (size == '环绕矩形') {
        Cookies.set('buttonShape', JSON.stringify({
          // 环绕矩形按钮CSS样式
          borderRadius: 'auto',
          borderColor: '#409eff',
          paddingSpace: '5px',
          borderLeft: '5px solid ',
          borderRight: '5px solid ',
          borderTop: '5px solid ',
          borderBottom: '5px solid',
          width: '60px',
          height: '60px',
          margin: '0',
          outline: 'none',
          textAlign: 'center',
        }))
      }

      this.refreshView()
      this.$message({
        message: 'Switch Size Success',
        type: 'success'
      })
    },
    refreshView() {
      //刷新
      location.reload()
    }
  }

}
</script>
